﻿@{
    ViewBag.Title = "Accordion";
}

<h2>Accordion samples</h2>

<h3>Sample #1</h3>
@using (var accordion = Html.BootstrapAccordion(htmlAttributes: new { @class = "well" }))
{
    using (accordion.AccordionGroup("Collapsible Group Item #1", options: AccordionGroupOptions.In))
    {
    <span>Anim pariatur cliche... 1</span>
    }
    using (accordion.AccordionGroup("Collapsible Group Item #2"))
    {
    <span>Anim pariatur cliche... 2</span>
    }
    using (accordion.AccordionGroup("Collapsible Group Item #3"))
    {
    <span>Anim pariatur cliche... 3</span>
    }
}


@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
    <div class="code">
&#64;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;accordion&nbsp;=&nbsp;Html.BootstrapAccordion(htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;}))<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(accordion.AccordionGroup(<span class="String">"Collapsible&nbsp;Group&nbsp;Item&nbsp;#1"</span>,&nbsp;options:&nbsp;AccordionGroupOptions.In))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;1&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(accordion.AccordionGroup(<span class="String">"Collapsible&nbsp;Group&nbsp;Item&nbsp;#2"</span>))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;2&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(accordion.AccordionGroup(<span class="String">"Collapsible&nbsp;Group&nbsp;Item&nbsp;#3"</span>))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
}
</div>
}

<h3>Sample #2</h3>

@using (var accordion2 = Html.BootstrapAccordion(htmlAttributes: new { @class = "well" }))
{
    var header2 = Html.Container()
                        .Add<Img>("~/Images/icon-leaf.png", htmlAttributes: new { title = "this is title" })
                        .Add(" Collapsible Group Item #2");

    var header3 = Html.Container()
                        .Add<Img>("~/Images/icon-yinyang.png")
                        .Add(" Collapsible Group Item #3");
    
    
    @accordion2.AccordionGroupFromPartial("Collapsible Group Item #1", AccordionPartials.PARTIAL1)
    @accordion2.AccordionGroupFromPartial(header2, AccordionPartials.PARTIAL2, options: AccordionGroupOptions.In)
    using (accordion2.AccordionGroup(header3))
    {
    <span>Anim pariatur cliche... 3</span>
    }
}

@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
<div class="code">
&#64;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;accordion2&nbsp;=&nbsp;Html.BootstrapAccordion(htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;}))<br />
{<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;header2&nbsp;=&nbsp;Html.Container()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add&lt;Img&gt;(<span class="String">"~/Images/icon-leaf.png"</span>,&nbsp;htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;title&nbsp;=&nbsp;<span class="String">"this&nbsp;is&nbsp;title"</span>&nbsp;})<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add(<span class="String">"&nbsp;Collapsible&nbsp;Group&nbsp;Item&nbsp;#2"</span>);<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;header3&nbsp;=&nbsp;Html.Container()<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add&lt;Img&gt;(<span class="String">"~/Images/icon-yinyang.png"</span>)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.Add(<span class="String">"&nbsp;Collapsible&nbsp;Group&nbsp;Item&nbsp;#3"</span>);<br />
&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&#64;accordion2.AccordionGroupFromPartial(<span class="String">"Collapsible&nbsp;Group&nbsp;Item&nbsp;#1"</span>,&nbsp;AccordionPartials.PARTIAL1)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&#64;accordion2.AccordionGroupFromPartial(header2,&nbsp;AccordionPartials.PARTIAL2,&nbsp;options:&nbsp;AccordionGroupOptions.In)<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(accordion2.AccordionGroup(header3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
}
</div>
}

<h3>Sample #3</h3>

@{
    var accordion3 = Html.CreateBootstrapAccordion(htmlAttributes: new { @class = "well" });
    var accordionGroup1 = accordion3.CreateAccordionGroup();
    var accordionGroup2 = accordion3.CreateAccordionGroup();
    var accordionGroup3 = accordion3.CreateAccordionGroup();

    <div>Control accordion outside the section.</div>
    <div>Open/section second section (java-script) <input type="button" onclick="@accordionGroup2.ToggleJS("toggle")" value="toggle" /> </div>
    <div>Open/close third section (attributes) <input type="button" @accordionGroup3.ToggleAttr() value="toggle"/> </div>

    using (var accordion = Html.BootstrapAccordion(accordion3))
    {
        using (accordion.AccordionGroup(accordionGroup1, "Collapsible Group Item #1"))
        {
    <span>Anim pariatur cliche... 1</span>
        }
        using (accordion.AccordionGroup(accordionGroup2, "Collapsible Group Item #2"))
        {
    <span>Anim pariatur cliche... 2</span>
        }
        using (accordion.AccordionGroup(accordionGroup3, "Collapsible Group Item #3"))
        {
    <span>Anim pariatur cliche... 3</span>
        }
    }

}

@using (Html.VisiToggler("show the sample source code ", VisiOptions.HiddenByDefault, htmlAttributes: new { @class = "onright" }))
{
    <br />
<div class="code">
&#64;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;accordion3&nbsp;=&nbsp;Html.CreateBootstrapAccordion(htmlAttributes:&nbsp;<span class="Keyword">new</span>&nbsp;{&nbsp;&#64;<span class="ReferenceType">class</span>&nbsp;=&nbsp;<span class="String">"well"</span>&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;accordionGroup1&nbsp;=&nbsp;accordion3.CreateAccordionGroup();<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;accordionGroup2&nbsp;=&nbsp;accordion3.CreateAccordionGroup();<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Linq">var</span>&nbsp;accordionGroup3&nbsp;=&nbsp;accordion3.CreateAccordionGroup();<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;Control&nbsp;accordion&nbsp;outside&nbsp;the&nbsp;section.&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;Open/section&nbsp;second&nbsp;section&nbsp;(java-script)&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;onclick=<span class="String">"&#64;accordionGroup2.ToggleJS("</span>toggle<span class="String">")"</span>&nbsp;value=<span class="String">"toggle"</span>&nbsp;/&gt;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;Open/close&nbsp;third&nbsp;section&nbsp;(attributes)&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=<span class="String">"button"</span>&nbsp;&#64;accordionGroup3.ToggleAttr()&nbsp;value=<span class="String">"toggle"</span>/&gt;&nbsp;&lt;/div&gt;<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(<span class="Linq">var</span>&nbsp;accordion&nbsp;=&nbsp;Html.BootstrapAccordion(accordion3))<br />
&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(accordion.AccordionGroup(accordionGroup1,&nbsp;<span class="String">"Collapsible&nbsp;Group&nbsp;Item&nbsp;#1"</span>))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;1&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(accordion.AccordionGroup(accordionGroup2,&nbsp;<span class="String">"Collapsible&nbsp;Group&nbsp;Item&nbsp;#2"</span>))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;2&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="Namespace">using</span>&nbsp;(accordion.AccordionGroup(accordionGroup3,&nbsp;<span class="String">"Collapsible&nbsp;Group&nbsp;Item&nbsp;#3"</span>))<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Anim&nbsp;pariatur&nbsp;cliche...&nbsp;3&lt;/span&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
}
</div>
}